<template>
  <div class="goods-item">
    <div class="img-wrapper">
      <img v-lazy="imgSrc" :width="imgProps.width" :height="imgProps.height"/>
      <label-title v-if="showLabelTitle" :text="goods.article_channel" class="lb-title" :bgColor="ltBgColor(goods.article_channel_id)"></label-title>
    </div>
    <div class="title">
      <div class="ellipse" :class="getTitleCls" :style="getStyle">{{goods.article_title}}</div>
      <span class="price">{{goods.article_price}}</span>
      <div class="bottom-wrapper">
        <div class="mall">
          <span>{{goods.article_mall}} {{goods.article_mall ? '|' : ''}} {{goods.article_date || goods.article_format_date}}</span>
        </div>
        <div class="comments">
          <i class="weui icon-comments-o"></i><span>{{goods.article_comment || 0}}</span>
        </div>
        <div class="zhi">
          <i class="weui icon-zhi"></i><span>{{goods.article_worthy ? goods.article_worthy : '0'}}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
// const imgReg = /width[^\d]+(\d+?px)[\\'\\"\s]+height[^\d]+(\d+px)/
import { labelTitleBgColor } from '@/config/config'
import LabelTitle from 'base/label-title/label-title'
import { getImgSrc } from 'common/js/tools'
import { mapGetters } from 'vuex'
export default {
  name: 'goods',
  components: {
    LabelTitle
  },
  props: {
    goods: {
      type: Object,
      default: () => {}
    },
    showLabelTitle: {
      type: Boolean,
      default: true
    }
  },
  computed: {
    getStyle () {
      if (this.visitedList.indexOf(this.goods.article_id) > 0) {
        return {
          color: '#A9A9A9'
        }
      } else {
        return null
      }
    },
    imgSrc () {
      return getImgSrc(this.goods.article_pic)
    },
    imgProps () {
      let width = '82px'
      let height = '82px'
      // if (this.goods.article_pic_style) {
      //   let matchs = this.goods.article_pic_style.match(imgReg)
      //   if (matchs[1]) width = matchs[1]
      //   if (matchs[2]) height = matchs[2]
      //   console.log(matchs)
      // }
      return {
        width,
        height
      }
    },
    getTitleCls () {
      return 'unvisited'
    },
    ...mapGetters({
      visitedList: 'visitedList'
    })
  },
  methods: {
    ltBgColor (articleChannelId) {
      let reColor = '#F36D6D'
      if (articleChannelId) {
        reColor = labelTitleBgColor[articleChannelId]
      }
      return reColor
    }
  }
}
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
@import '~common/stylus/variable'
@import '~common/stylus/mixin'
.goods-item
  display: flex
  border-shadow: 1px 1px 2px 4px #888
  padding: 8px
  align-items: center
  margin-bottom: 8px
  background: #FFFFFE
  .img-wrapper
    margin-right: 12px
    position: relative
    .lb-title
      position: absolute
      left: 0
      top: 1px
  .title
    flex: 1
    height: 82px
    padding: 0px 5px 0px 0px
    position: relative
    .ellipse
      /*
      display: -webkit-box
      -webkit-box-orient: vertical
      -webkit-line-clamp: 2
      vertical-align: middle
      */
      height: 40px
      font-size: 14px
      line-height: 20px
      font-weight: 700
      overflow: hidden
      &.unvisited
        color: #333333
      &.visited
        color: $color-text-light
    .price
      position: absolute
      width: 100%
      left: 0
      bottom: 24px
      font-size: 14px
      line-height: 14px
      color: #F04848
      no-wrap()
    .bottom-wrapper
      position: absolute
      display: flex
      overflow: hidden
      width: 100%
      left: 0
      bottom: 0px
      color: #C1C1C1
      font-size: 8px
      .mall
        flex: 1
        overflow: hidden
        no-wrap()
        span
          font-size: 12px
      .comments
        flex: 0 0 45px
        width: 45px
        line-height: 14px
        i, span
          vertical-align: middle
          font-size: 12px
        .icon-comments-o
          font-size: 12px
          padding-right: 6px
      .zhi
        flex: 0 0 50px
        width: 50px
        line-height: 14px
        i, span
          vertical-align: middle
          font-size: 12px
        .icon-zhi
          font-size: 12px
          padding-right: 6px

</style>
